import React, { memo, useRef } from 'react';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import styles from './index.less';
import './codemirror.less';
import { Input } from 'antd';
import { connect } from 'umi';
/**
 * @description 属性绑定组件
 * @param props 属性
 * @param props.onChange 变动方法
 * @param props.value 绑定值
 * @param props.type 绑定类型
 */
function ExpressEditor({
  onChange,
  value,
  type,
}: API.IExpressEditor): JSX.Element {
  const ref: React.LegacyRef<any> = useRef();
  if (type === 'string') {
    return <Input defaultValue={value} onBlur={onChange} />;
  }

  return (
    <div className={styles.codeBox}>
      <p>{type === 'express' ? '=' : 'fx'}</p>
      <div className={styles.codeRight}>
        <span className={type === 'express' ? styles.hidden : ''}>
          {'function getValue(params:type) {'}
        </span>
        {/* @ts-ignore */}
        <CodeMirror
          onBlur={onChange}
          value={value}
          ref={ref}
          className={styles.editor}
          options={{
            mode: { name: 'text/javascript' },
            theme: 'material',
            lineNumbers: false,
            //start-设置支持代码折叠
            lineWrapping: true,
            foldGutter: true,
            gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
            matchBrackets: true, //括号匹配，光标旁边的括号都高亮显示
            autoCloseBrackets: true, //键入时将自动关闭()[]{}''""
          }}
        />
        <span className={type === 'express' ? styles.hidden : ''}>{'}'}</span>
      </div>
    </div>
  );
}

export default memo(ExpressEditor);
